// 导入React核心库
import React from "react";
// 导入React Router相关组件
import { RouterProvider, createBrowserRouter } from "react-router-dom";
// 导入路由配置
import routes from "./router/Index";
// 导入主题上下文提供者和钩子
import { ThemeProvider, useThemeContext } from "./app/ThemeContext";

/**
 * 主应用组件
 * 提供主题上下文和路由功能
 */
function App() {
    return (
        // 主题提供者，为整个应用提供主题上下文
        <ThemeProvider>
            {/* 主题切换动画遮罩 */}
            <ThemeMask />
            {/* 路由提供者，使用浏览器路由 */}
            <RouterProvider
                router={createBrowserRouter(routes)}
            ></RouterProvider>
        </ThemeProvider>
    );
}

/**
 * 全局动画遮罩组件
 * 用于主题切换时的圆形扩散动画效果
 */
function ThemeMask() {
    // 从主题上下文获取遮罩相关状态
    const { masking, maskRef, maskColor, maskCenter } = useThemeContext();

    // 如果不需要显示遮罩，返回null
    if (!masking) return null;

    return (
        // 遮罩容器，覆盖整个视口
        <div
            ref={maskRef}
            style={{
                pointerEvents: "none", // 不响应鼠标事件
                position: "fixed", // 固定定位
                top: 0,
                left: 0,
                zIndex: 9999, // 最高层级
                width: "100vw", // 全视口宽度
                height: "100vh", // 全视口高度
                overflow: "hidden", // 隐藏溢出内容
            }}
        >
            {/* 动画圆形元素 */}
            <div
                style={{
                    position: "absolute",
                    left: maskCenter.x - 20, // 居中定位
                    top: maskCenter.y - 20,
                    width: 40, // 初始大小40px
                    height: 40,
                    borderRadius: "50%", // 圆形
                    background: maskColor, // 使用主题色
                    transform: "translate(0,0) scale(0)", // 初始缩放为0
                    animation:
                        "circle-reveal-global 0.7s cubic-bezier(.4,0,.2,1) forwards", // 扩散动画
                }}
            />

            {/* 定义动画关键帧 */}
            <style>{`
        @keyframes circle-reveal-global {
          0% {
            transform: scale(0);    // 开始时缩放为0
            opacity: 1;
          }
          80% {
            opacity: 1;             // 80%时保持不透明
          }
          100% {
            transform: scale(200);  // 结束时放大200倍，确保覆盖整个屏幕
            opacity: 1;
          }
        }
      `}</style>
        </div>
    );
}

export default App;
